<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-menu-item index="1">
      <svg-icon icon="logo" style="font-size: 30px"></svg-icon>
    </el-menu-item>
    <el-menu-item index="2">交流</el-menu-item>
    <el-menu-item index="3" disabled>案例</el-menu-item>
    <el-menu-item index="4">框架</el-menu-item>
    <el-menu-item index="5">框架</el-menu-item>
    <el-menu-item index="6">登入</el-menu-item>
    <el-menu-item index="7">注册</el-menu-item>
    <el-menu-item index="8">
      <svg-icon icon="qq" style="font-size: 20px" />
    </el-menu-item>
    <el-menu-item index="9">
      <svg-icon icon="wechat" style="font-size: 20px" />
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>
